<template>
  <div class="card"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { controlledComputed } from '@vueuse/core';

let source = ref('foo');
let counter = ref(0);

const computedRef = controlledComputed(
  () => source.value, // watch source, same as `watch`
  () => counter.value, // computed getter, same as `computed`
);

console.log(computedRef.value); // 0

counter.value += 1;

console.log(computedRef.value); // 0

source.value = 'bar';

console.log(computedRef.value); // 1
</script>
